<template>
  <div>
    <head-vue></head-vue>

    <div style="border-right: 1px solid #f0f0f0;width: 10%;height:93.5%;position:fixed;left: 0;top: 3.74rem;">
      <ul class="mt-2">
        <li id="menu-1" class="m-active" @click="menu1()"><i class="bi bi-search ml-4"></i> 桌码管理</li>
        <li id="menu-2" class="" @click="menu2()"><i class="bi bi-search ml-4"></i> 堂食订单</li>
      </ul>
    </div>
    <TableManage id="TableManage"></TableManage>
    <HallfoodOrder id="HallfoodOrder" v-show="flag"></HallfoodOrder>
  </div>
</template>

<script>
  export default {
    name: "App",
    methods:{
      data(){
        flag:false
      },
      menu1(){
        $("#menu-1").attr("class","m-active")
        $("#menu-2").attr("class"," ")
        $("#TableManage").fadeIn(300)
        $("#HallfoodOrder").hide()
      },
      menu2(){
        $("#menu-1").attr("class"," ")
        $("#menu-2").attr("class","m-active")
        this.flag=true
        $("#TableManage").hide()
        $("#HallfoodOrder").fadeIn(300)
      }
    },
    mounted() {
      this.menu1()
    }
  }
</script>

<style scoped>
  li{
    list-style: none;
    /*background-color: #F0FAFF;*/
    cursor: pointer;
    height: 3rem;
    line-height: 2.9rem;
  }
  ul{
    padding: 0;
  }
  .m-active{
    background-color: #F0FAFF;
    border-right: 2px solid #2D8CF0;
  }
</style>
